<template>
  <el-dialog
    :visible.sync="dialogPasswordVisible"
    :title="dialogPasswordTitle"
    :before-close="handlePasswordClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
  >
    <div v-loading="dialogPasswordLoading">
      <el-form :model="passwordFormData" ref="passwordForm" :rules="rules" label-width="80px">
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model.trim="passwordFormData.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password_confirm">
          <el-input
            type="password"
            v-model.trim="passwordFormData.password_confirm"
            placeholder="确认密码"
          ></el-input>
        </el-form-item>
      </el-form>

      <div class="tool2">
        <el-button type="primary" size="medium" @click="handlePasswordSubmit()">确定</el-button>
        <el-button size="medium" @click="handlePasswordClose()">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  components: {},

  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.passwordFormData.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }

    return {
      dialogPasswordVisible: false,
      dialogPasswordTitle: '修改密码',
      dialogPasswordLoading: false,

      passwordFormData: {
        password: '',
        password_confirm: '',
      },
      rules: {
        password_confirm: [{ validator: validatePass, trigger: 'blur' }],
      },
    }
  },

  mounted: function () {},
  computed: {},
  methods: {
    // 显示对话框
    async handlePasswordShow() {
      this.passwordFormData.password = ''
      this.passwordFormData.password_confirm = ''
      this.dialogPasswordVisible = true
    },

    // 关闭对话框
    async handlePasswordClose() {
      this.dialogPasswordVisible = false
    },

    // 保存
    async handlePasswordSubmit() {
      const that = this

      that.$refs.passwordForm.validate(async (v) => {
        if (!v) {
          return false
        }
        console.log(1)
        try {
          that.dialogPasswordLoading = true
          const { result } = await that.$.user.password({
            password: that.passwordFormData.password,
          })
          that.dialogPasswordLoading = false
          that.dialogPasswordVisible = false
          that.$message({ type: 'success', message: '设置成功' })
        } catch (e) {
          that.dialogPasswordLoading = false
        }
      })
    },
  },
}
</script>

<style scoped></style>
